<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Mootools CSS3 feature detection</title>

<script src="mootools-1.2.3-core.js" type="text/javascript"></script>
<script src="mooModernizr-min.js" type="text/javascript"></script>

<script type="text/javascript">
	
window.addEvent('domready',function(){
	document.id('tests').getChildren('li').each(function(el){
		var test = el.get('text').split(' ')[0];
		el.adopt(new Element('img',{src: (Browser.Features[test] ? 'yes.png' : 'no.png')}))
	});	

	['textshadow','borderradius','boxshadow','csstransforms'].each(function(item){
		if(Browser.Features[item]){
			$(document.body).addClass(item);
		}else{
			$(document.body).addClass('no-'+item);
		}
	});
});

</script>

<link  href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>
<body>

<h1>Mootools CSS3 feature detection</h1>

<p>
	MooModernizr is a <a href="http://www.mootools.net">Mootools 1.2</a> port of <a href="http://www.modernizr.com/">Modernizr 0.9</a>.	
	It includes tests for a variety of CSS 3 features. Therefore it extends the <code>Browser.Features</code> object.<br />
	Modernizr supports some extra functionality, like add a class to the body element (so you can do <em>if-else</em> in your css file), some html5 stuff for IE etc. 
	I, however, decided to not include this to MooModernizr. This is because this does not fit into the Browser.Features
	object. But I will explain how you can add this functionallity yourself whith some examples below.
</p>

<h2>List of CSS3/HTML5 feature tests</h2>

<ul id="tests">
	<li>canvas - VERY rudimentary</li>
	<li>rgba</li>
	<li>hsla</li>
	<li>multiplebgs</li>
	<li>borderimage</li>
	<li>borderradius</li>
	<li>boxshadow</li>
	<li>textshadow</li>
	<li>opacity</li>
	<li>cssanimations</li>
	<li>csscolumns - VERY rudimentary</li>
	<li>cssgradients</li>
	<li>cssreflections</li>
	<li>csstransforms</li>
	<li>csstransitions</li>
	<li>video tag</li>
	<li>audio tag</li>
	<li>query - use native selector engine document.querySelecotorAll()</li>
	<li>json - use native JSON</li>	
</ul>

<img src="yes.png" alt="Yes" />: Your Browser supports this feature<br />
<img src="no.png" alt="No" />: To bad, your browser does not support this feature (yet)

<h2>Basic functionallity</h2>

<p>
	You can use the new test just like <code>Browser.Features.xpath</code> and <code>Browser.Features.xhr</code> (<a href="http://mootools.net/docs/core/Core/Browser#Browser">link</a>).
</p>

<pre>
<strong>Javascript:</strong>

// Does the browser support textshadow
alert(Browser.Features.textshadow);

// Does the browser support cssclumns
alert(Browser.Features.csscolumns);

if(!Browser.Features.borderradius){
	// Do something... (http://www.phatfusion.net/roundedcorners/)
	var box = new RoundedCorners('.roundedContent', {radius: 49});
}
</pre>


<h3>What does it return?</h3>

<p>
	Most of the tests return <code>true</code> or <code>false</code>. Some tests 
	however return a string. For example borderradius. As you can see 
	<a href="http://www.the-art-of-web.com/css/border-radius/">here</a>, Firefox 
	does not uses another attribute for <code>border-top-left-radius</code>: 
	<code>-moz-border-radius-topleft</code>. To detect this, <code>Browser.Features.borderradius</code> 
	returns <code>MozBorderRadiusTopright</code> in Firefox. With this you can 
	create another <em>if-else</em>. 
</p>

<p>
	The following tests return a string. All the other tests do return true/false.
</p>

<ul>
	<li>borderimage</li>
	<li>borderradius</li>
	<li>boxshadow</li>
	<li>textshadow</li>
	<li>cssanimations</li>
	<li>csscolumns</li>
	<li>cssreflections</li>
	<li>csstransforms</li>
	<li>csstransitions</li>
</ul>


<h3>if-else in my CSS file, just like Modernizr</h3>

<p>
	This can be very handy. For example, you can put this in your 
	css file.
</p>

<pre>
<strong>CSS:</strong>

body.boxshadow #contentbox {
	box-shadow: 10px 10px 5px #888;
}

body.no-boxshadow #contentbox {
	/* extra fat border, as alternative */
	border: 10px black solid;
}</pre>
<p>
	And this in your javascript file / document head
</p>
<pre>
<strong>Javascript:</strong>
window.addEvent('domready',function(){
	$each(Browser.Features, function(item,index){
		if(item){
			$(document.body).addClass(index);
		}else{
			$(document.body).addClass('no-'+index);
		}
	});
	
	// Or if you only want to check for some features you can do this
	['textshadow','borderradius'].each(function(item){
		if(Browser.Features[item]){
			$(document.body).addClass(item);
		}else{
			$(document.body).addClass('no-'+item);
		}
	});
	
});
</pre>

<h3>Create HTML5 for styling in IE</h3>
<pre>
<strong>Javascript:</strong>
window.addEvent('domready',function(){

	'abbr article aside audio bb canvas '+
	'datagrid datalist details dialog figure '+
	'footer header mark menu meter nav output '+
	'progress section time video'+
	''.split(' ').each(function(tag){
		new Element(tag);
	});	
	
});
</pre>


<h2>Dependencies</h2>
<ul>
	<li>
		Mootools 1.2.x
		<ul>
			<li>Core</li>
			<li>Browser</li>
			<li>Element</li>
		</ul>
	</li>
</ul>

<h2>Download &amp; links</h2>

<ul>
	<li>Full, uncompressed version <a href="Source/mooModernizr.js">mooModernizr.js</a> (9.1 kb) (if you want to add/delete/edit tests)</li>
	<li>Minified version <a href="mooModernizr-min.js">mooModernizr-min.js</a>  (4.8 kb)</li>
	<li>Look at the source at <a href="http://github.com/arian/mooModernizr/tree/master">Github.com</a></li>
	<li>Follow the discussion at <a href="http://www.mooforum.net/scripts12/moomodernizr-t2015.html">mooforum.net</a></li>
	<li>Download at <a href="http://www.esteak.net/plugin/MooModernizr">eSteak</a></li>	
</ul>

<h2>Created by</h2>

<ul>
	<li>First of all: <a href="http://www.modernizr.com">Modernizr</a></li>
	<li>Author of the Mootools version: Arian Stolwijk: <a href="http://www.aryweb.nl">Aryweb webdevelopment</a></li>
</ul>

</body>
</html>
